2025年9月25日日本語

React Server Componentの力を活用して、レジリエントなWebアプリケーションを構築しましょう。プログレッシブエンハンスメント、グラフィカルなJavaScript低下、そしてグローバルにアクセス可能なユーザーエクスペリエンスのための実践的な戦略を探求します。

React Server Componentによるプログレッシブエンハンスメント：レジリエントなWebのためのグラフィカルなJavaScript低下

ますます相互接続されながらも多様化するデジタル世界において、Webは驚くほど多様なデバイス、極めて異なるネットワーク条件下、そして広範な能力と嗜好を持つユーザーによってアクセスされています。どこでも、誰にでも一貫して高品質なエクスペリエンスを提供するアプリケーションを構築することは、単なるベストプラクティスではなく、グローバルなリーチと成功のための必須事項です。この包括的なガイドでは、Reactエコシステムにおける画期的な進歩であるReact Server Components（RSC）が、プログレッシブエンハンスメントとグラフィカルなJavaScript低下の原則を推進し、より堅牢で、パフォーマンスが高く、普遍的にアクセス可能なWebをどのように活用できるかを探求します。

数十年にわたり、Web開発者はリッチなインタラクティビティと基本的なアクセシビリティのトレードオフに苦悩してきました。シングルページアプリケーション（SPA）の台頭は比類のない動的なユーザーエクスペリエンスをもたらしましたが、それはしばしば初期ロード時間、クライアントサイドJavaScriptへの依存、そして完全に機能するJavaScriptエンジンなしでは崩壊してしまうベースラインエクスペリエンスの犠牲の上に成り立っていました。React Server Componentsは、開発者がReactで知られている強力なコンポーネントモデルを提供しながら、レンダリングとデータフェッチをサーバーに戻すことを可能にする、説得力のあるパラダイムシフトを提供します。この再バランスは、クライアントサイドの機能に関わらず、アプリケーションのコアコンテンツと機能が常に利用可能であることを保証し、真のプログレッシブエンハンスメントを強力に可能にします。

進化するWebランドスケープとレジリエンスの必要性

グローバルなWebエコシステムは、コントラストのタペストリーです。最先端のスマートフォンで光ファイバー接続を持つ活気のある大都市のユーザーと、パッチーなモバイル接続を介して古いフィーチャーフォンのブラウザでインターネットにアクセスする遠隔地の村のユーザーを比較してみてください。どちらも利用可能なエクスペリエンスを受ける権利があります。従来のクライアントサイドレンダリング（CSR）は、後者のシナリオではしばしば失敗し、空白の画面、壊れたインタラクティビティ、またはイライラするほど遅いロードにつながります。

純粋にクライアントサイドのアプローチの課題には以下が含まれます：

パフォーマンスのボトルネック：大きなJavaScriptバンドルは、インタラクティブになるまでの時間（TTI）を大幅に遅延させ、Core Web Vitalsとユーザーエンゲージメントに影響を与えます。
アクセシビリティの障壁：支援技術を持つユーザーや、JavaScriptを無効にしてブラウジングすることを好むユーザー（セキュリティ、パフォーマンス、または個人的な理由）は、利用できないアプリケーションしか得られない可能性があります。
SEOの制限：検索エンジンはJavaScriptのクロールにますます慣れていますが、サーバーレンダリングされたベースラインは、発見可能性のための最も信頼できる基盤を提供し続けます。
ネットワーク遅延：JavaScriptのすべてのバイト、クライアントからのすべてのデータフェッチは、ユーザーのネットワーク速度の影響を受けますが、これは世界中で大きく変動する可能性があります。

ここで、プログレッシブエンハンスメントとグラフィカルな低下の古くからの概念が、過去の時代の遺物としてではなく、不可欠な現代の開発戦略として再び浮上します。React Server Componentsは、今日の洗練されたWebアプリケーションでこれらの戦略を効果的に実装するためのアーキテクチャバックボーンを提供します。

現代のコンテキストにおけるプログレッシブエンハンスメントの理解

プログレッシブエンハンスメントは、すべてのユーザーに普遍的なベースラインエクスペリエンスを提供し、その後、能力のあるブラウザと高速な接続を持つユーザーのために、より高度な機能とリッチなエクスペリエンスをレイヤー化することを提唱するデザイン哲学です。それは、堅牢でアクセス可能なコアから外側に向かって構築することです。

プログレッシブエンハンスメントのコア原則には、3つの明確なレイヤーが含まれます：

コンテンツレイヤー（HTML）：これが絶対的な基盤です。CSSやJavaScriptに依存することなく、意味論的にリッチで、アクセス可能で、コアの情報と機能を提供する必要があります。シンプルな記事、製品説明、または基本的なフォームを想像してみてください。
プレゼンテーションレイヤー（CSS）：コンテンツが利用可能になったら、CSSはその視覚的な魅力とレイアウトを強化します。エクスペリエンスを美しくし、より魅力的でユーザーフレンドリーにしますが、CSSなしでもコンテンツは読み取り可能で機能的です。
ビヘイビアーレイヤー（JavaScript）：これは最後のレイヤーであり、高度なインタラクティビティ、動的な更新、複雑なユーザーインターフェイスを追加します。重要なのは、JavaScriptがロードされないか、実行されない場合でも、ユーザーはHTMLとCSSレイヤーによって提供されるコンテンツと基本的な機能にアクセスできるということです。

グラフィカルな低下は、プログレッシブエンハンスメントと混同されがちですが、微妙に異なります。プログレッシブエンハンスメントはシンプルなベースから構築します。グラフィカルな低下は、完全に機能する強化されたエクスペリエンスから開始し、その後、JavaScriptのような特定の高度な機能が利用できない場合に、アプリケーションがより洗練されてはいるものの、まだ機能的なバージョンにグラフィカルにフォールバックできることを保証します。これら2つのアプローチは補完的であり、しばしば連携して実装され、両方ともレジリエンスとユーザーの包括性を目指しています。

特にReactのようなフレームワークを備えた現代のWeb開発のコンテキストでは、開発者エクスペリエンスや高インタラクティブなアプリケーションを構築する能力を犠牲にすることなく、これらの原則を維持することが課題となっています。React Server Componentsは、この課題に正面から取り組みます。

React Server Components（RSC）の台頭

React Server Componentsは、Reactアプリケーションのアーキテクチャ方法における根本的な変化を表します。サーバーをレンダリングとデータフェッチにより広範囲に活用する方法として導入されたRSCは、開発者がサーバー上で排他的に実行されるコンポーネントを構築し、結果のHTMLとCSS（および最小限のクライアントサイドの指示）のみをブラウザに送信することを可能にします。

RSCの主な特徴：

サーバーサイド実行：RSCはサーバー上で一度実行され、クライアントに機密情報を公開することなく、直接データベースアクセス、安全なAPI呼び出し、効率的なファイルシステム操作を可能にします。
コンポーネントのゼロバンドルサイズ：RSCのJavaScriptコードはクライアントに送信されません。これにより、クライアントサイドのJavaScriptバンドルが大幅に削減され、ダウンロードと解析時間が短縮されます。
データのストリーミング：RSCは、データが利用可能になり次第、レンダリングされた出力をクライアントにストリーミングでき、UIの一部がページ全体のロードを待つのではなく、段階的に表示されるようになります。
クライアントサイドの状態やエフェクトはありません：RSCは、クライアントで再レンダリングされたり、クライアントサイドのインタラクティビティを管理したりしないため、`useState`、`useEffect`、`useRef` のようなフックを持ちません。
クライアントコンポーネントとの統合：RSCは、`"use client"` でマークされたクライアントコンポーネントをツリー内にレンダリングし、それらにプロップスを渡すことができます。これらのクライアントコンポーネントは、その後クライアントでハイドレーションされ、インタラクティブになります。

サーバーコンポーネントとクライアントコンポーネントの区別は重要です：

サーバーコンポーネント：データをフェッチし、静的または動的なHTMLをレンダリングし、サーバー上で実行され、クライアントサイドのJavaScriptバンドルはなく、それ自体ではインタラクティビティはありません。
クライアントコンポーネント：インタラクティビティ（クリック、状態更新、アニメーション）を処理し、クライアント上で実行され、JavaScriptを必要とし、初期サーバーレンダリング後にハイドレーションされます。

RSCの主な約束は、パフォーマンス（特に初期ページロード）、クライアントサイドJavaScriptのオーバーヘッドの削減、そしてサーバー中心のロジックとクライアント中心のインタラクティビティの間の明確な関心の分離です。

RSCとプログレッシブエンハンスメント：自然な相乗効果

React Server Componentsは、堅牢なHTMLファーストのベースラインを提供することで、プログレッシブエンハンスメントの原則と本質的に一致しています。その方法は次のとおりです。

RSCで構築されたアプリケーションがロードされると、サーバーはサーバーコンポーネントをHTMLにレンダリングします。このHTMLは、CSSとともにブラウザに送信されます。この時点では、クライアントサイドのJavaScriptがロードまたは実行される前であっても、ユーザーは完全に形成され、読み取り可能で、しばしばナビゲート可能なページを持っています。これはプログレッシブエンハンスメントの基盤です – コアコンテンツが最初に配信されます。

典型的なeコマース製品ページを考えてみましょう：

RSCは、製品の詳細（名前、説明、価格、画像）をデータベースから直接フェッチできます。
その後、この情報を標準のHTMLタグ（<h1>、<p>、<img>）にレンダリングします。
重要なのは、注文を処理するためにサーバーアクションに送信される「カートに追加」ボタンを持つ<form>もレンダリングできることです。

この初期のサーバーレンダリングされたHTMLペイロードは、アプリケーションの非強化バージョンです。高速で、検索エンジンにフレンドリーで、最も幅広いユーザーにアクセスできます。Webブラウザは、このHTMLをすぐに解析して表示でき、迅速な最初のコンテンツフルペイント（FCP）と堅牢な最大のコンテンツフルペイント（LCP）につながります。

（`"use client"` でマークされた）クライアントコンポーネントのクライアントサイドJavaScriptバンドルがダウンロードされ、実行されると、ページは「ハイドレーション」されます。ハイドレーション中に、ReactはサーバーレンダリングされたHTMLを引き継ぎ、イベントリスナーをアタッチし、クライアントコンポーネントに命を吹き込み、インタラクティブにします。このレイヤードアプローチにより、アプリケーションはロードプロセスのすべての段階で利用可能であることが保証され、プログレッシブエンハンスメントの本質を体現しています。

RSCによるグラフィカルなJavaScript低下の実装

RSCのコンテキストにおけるグラフィカルな低下とは、インタラクティブなクライアントコンポーネントを、JavaScriptが失敗した場合でも、基盤となるサーバーコンポーネントのHTMLが機能的（ただし動的ではない）なエクスペリエンスを提供することを保証するように設計することを意味します。これには、慎重な計画とサーバーとクライアント間の相互作用の理解が必要です。

ベースラインエクスペリエンス（JavaScriptなし）

RSCとプログレッシブエンハンスメントにおけるあなたの主な目標は、JavaScriptが無効になっているか、ロードに失敗した場合でも、アプリケーションが意味のある機能的なエクスペリエンスを提供することを保証することです。これは意味します：

コアコンテンツの可視性：すべての必須テキスト、画像、静的データは、標準のHTMLにレンダリングされるサーバーコンポーネントによってレンダリングされる必要があります。たとえば、ブログ記事は完全に読み取り可能である必要があります。
ナビゲーション性：すべての内部および外部リンクは標準の<a>タグである必要があり、クライアントサイドルーティングが利用できない場合でも、フルページリフレッシュによるナビゲーションが機能することを保証します。
フォーム送信：重要なフォーム（例：ログイン、連絡先、検索、カートへの追加）は、ネイティブHTML<form>要素を使用して、サーバーエンドポイント（React Server Actionのような）を指すaction属性とともに機能する必要があります。これにより、クライアントサイドのフォーム処理なしでもデータを送信できます。
アクセシビリティ：セマンティックHTML構造により、スクリーンリーダーやその他の支援技術がコンテンツを効果的に解釈し、ナビゲートできます。

例：製品カタログ
RSCは製品リストをレンダリングします。各製品には、画像、名前、説明、価格があります。「カートに追加」ボタンは、サーバーアクションに送信するサーバーアクションを処理する<form>でラップされた標準の<button>です。JavaScriptなしで、「カートに追加」をクリックすると、フルページリフレッシュが実行されますが、アイテムは正常に追加されます。ユーザーは引き続き閲覧して購入できます。

強化されたエクスペリエンス（JavaScript利用可能）

JavaScriptが有効になりロードされると、クライアントコンポーネントは、このベースラインの上にインタラクティビティをレイヤー化します。ここで、現代のWebアプリケーションの真の魔法が輝きます：

動的なインタラクション：結果を即座に更新するフィルター、リアルタイム検索候補、アニメーションカルーセル、インタラクティブマップ、ドラッグアンドドロップ機能がアクティブになります。
クライアントサイドルーティング：フルリフレッシュなしでページ間をナビゲートし、より高速でSPAのような感触を提供します。
楽観的なUI更新：サーバー応答の前にユーザーアクションへの即時フィードバックを提供し、知覚されるパフォーマンスを向上させます。
複雑なウィジェット：日付ピッカー、リッチテキストエディタ、その他の高度なUI要素。

例：強化された製品カタログ
同じ製品カタログページで、`"use client"` コンポーネントが製品リストをラップし、クライアントサイドフィルタリングを追加します。今、ユーザーが検索ボックスに入力したり、フィルターを選択したりすると、ページをリロードせずに結果が即座に更新されます。「カートに追加」ボタンは、API呼び出しをトリガーし、ミニカートオーバーレイを更新し、ページから移動することなく即時の視覚的フィードバックを提供する可能性があります。

障害のための設計（グラフィカルな低下）

グラフィカルな低下の鍵は、JavaScript機能が失敗した場合でも、強化されたJavaScript機能がコア機能を壊さないことを保証することです。これにはフォールバックの構築が必要です。

フォーム：AJAX送信を実行するクライアントサイドフォームハンドラがある場合、基盤となる<form>に有効なactionおよびmethod属性があることを確認してください。JavaScriptが失敗した場合、フォームは従来のフルページ送信にフォールバックしますが、機能はします。
ナビゲーション：クライアントサイドルーティングが速度を提供する一方で、すべてのナビゲーションは根本的に標準の<a>タグに依存する必要があります。クライアントサイドルーティングが失敗した場合、ブラウザはフルページナビゲーションを実行し、ユーザーをフローさせ続けます。
インタラクティブ要素：アコーディオンやタブのような要素の場合、JavaScriptなしでもコンテンツが（例：すべてのセクションが表示される、または各タブの個別のページ）アクセス可能であることを確認してください。JavaScriptはその後、これらをインタラクティブなトグルに段階的に強化します。

このレイヤリングにより、ユーザーエクスペリエンスは最も基本的で堅牢なレイヤー（RSCからのHTML）から始まり、CSS、そしてクライアントコンポーネントのインタラクティビティへと段階的に強化が追加されます。いずれかの強化レイヤーが失敗した場合、ユーザーは前の機能するレイヤーにグラフィカルに低下され、完全に壊れたエクスペリエンスに遭遇することはありません。

レジリエントなRSCアプリケーション構築のための実践的な戦略

React Server Componentsでプログレッシブエンハンスメントとグラフィカルな低下を効果的に実装するには、これらの戦略を検討してください：

RSCからのセマンティックHTMLを優先する

常に、サーバーコンポーネントが完全でセマンティックに正しいHTML構造をレンダリングすることを保証することから始めてください。これは、<header>、<nav>、<main>、<section>、<article>、<form>、<button>、<a>のような適切なタグを使用することを意味します。この基盤は、本質的にアクセス可能で堅牢です。

`"use client"` を使用したインタラクティビティの責任あるレイヤリング

クライアントサイドのインタラクティビティが絶対に不可欠な場所を正確に特定してください。単にデータを表示またはリンクするだけのコンポーネントに`"use client"`をマークしないでください。サーバーコンポーネントとして保持できるものが多いほど、クライアントサイドバンドルは小さくなり、アプリケーションのベースラインはより堅牢になります。

たとえば、静的なナビゲーションメニューはRSCにできます。動的に結果をフィルターする検索バーには、入力用のクライアントコンポーネントとクライアントサイドのフィルタリングロジックが含まれる可能性がありますが、初期の検索結果とフォーム自体はサーバーによってレンダリングされます。

クライアントサイド機能のためのサーバーサイドフォールバック

JavaScriptによって強化されたすべての重要なユーザーアクションには、機能的なサーバーサイドフォールバックが必要です。

フォーム：フォームにAJAX送信用のクライアントサイド`onSubmit`ハンドラがある場合、<form>にもサーバーエンドポイント（React Server Actionまたは従来のAPIルート）を指す有効な`action`属性があることを確認してください。JavaScriptが利用できない場合、ブラウザは標準のフォームPOSTにフォールバックします。
ナビゲーション：Next.jsの`next/link`のようなクライアントサイドルーティングフレームワークは、標準の<a>タグ上に構築されています。これらの`<a>`タグには常に有効な`href`属性があることを確認してください。
検索とフィルタリング：RSCは、サーバーに検索クエリを送信するフォームをレンダリングでき、新しい結果でフルページリフレッシュを実行します。その後、クライアントコンポーネントは、インスタント検索候補またはクライアントサイドフィルタリングでこれを強化できます。

Server Actionsを利用してミューテーションを行う

React Server Actionsは、サーバー上で安全に実行される関数を、Server Components内、またはClient Componentsから直接定義できる強力な機能です。これらは、フォーム送信とデータミューテーションに最適です。重要なのは、HTMLフォームとシームレスに統合され、`action`属性の完璧なサーバーサイドフォールバックとして機能することです。


// app/components/AddToCartButton.js (Server Component)
export async function addItemToCart(formData) {
  'use server'; // この関数をServer Actionとしてマークします
  const productId = formData.get('productId');
  // ...サーバーでのアイテム追加ロジック...
  console.log(`サーバーで製品 ${productId} をカートに追加しました。`);
  // オプションでデータを再検証するか、リダイレクトします
}

export default function AddToCartButton({ productId }) {
  return (
    <form action={addItemToCart}>
      <input type="hidden" name="productId" value={productId} />
      <button type="submit">カートに追加</button>
    </form>
  );
}

この例では、JavaScriptが無効になっている場合、ボタンをクリックするとフォームが`addItemToCart` Server Actionに送信されます。JavaScriptが有効になっている場合、Reactはこの送信をインターセプトし、クライアントサイドのフィードバックを提供し、フルページリフレッシュなしでServer Actionを実行できます。

Client Componentsのエラーバウンダリの検討

RSCは本質的に堅牢ですが（サーバーで実行されるため）、Client ComponentsでもJavaScriptエラーが発生する可能性があります。Client Componentsの周りにReact Error Boundariesを実装して、クライアントサイドエラーが発生した場合にフォールバックUIをグラフィカルにキャッチして表示し、アプリケーション全体がクラッシュするのを防ぎます。これは、クライアントサイドJavaScriptレイヤーでのグラフィカルな低下の一形態です。

条件を跨いだテスト

JavaScriptを無効にしてアプリケーションを徹底的にテストしてください。ブラウザ開発者ツールを使用してJavaScriptをブロックするか、グローバルに無効にする拡張機能をインストールしてください。さまざまなデバイスやネットワーク速度でテストして、真のベースラインエクスペリエンスを理解してください。これは、グラフィカルな低下戦略が効果的であることを保証するために不可欠です。

コード例とパターン

例1：グラフィカルな低下を備えた検索コンポーネント

グローバルeコマースサイトの検索バーを想像してみてください。ユーザーはインスタントフィルタリングを期待していますが、JSが失敗した場合でも、検索は機能するはずです。

サーバーコンポーネント (`app/components/SearchPage.js`)


// これはサーバーコンポーネントで、サーバーで実行されます。
import { performServerSearch } from '../lib/data';
import SearchInputClient from './SearchInputClient'; // クライアントコンポーネント

export default async function SearchPage({ searchParams }) {
  const query = searchParams.query || '';
  const results = await performServerSearch(query); // 直接サーバーサイドデータフェッチ

  return (
    <div>
      <h1>製品検索</h1>
      
      {/* ベースラインフォーム：JavaScriptの有無にかかわらず機能します */} 
      <form action="/search" method="GET" className="mb-4">
        <SearchInputClient initialQuery={query} /> {/* 強化された入力用のクライアントコンポーネント */} 
        <button type="submit" className="ml-2 p-2 bg-blue-500 text-white rounded">検索</button>
      </form>

      <h2>"{query}" の結果</h2>
      {results.length === 0 ? (
        <p>製品が見つかりませんでした。</p>
      ) : (
        <ul className="list-disc pl-5">
          {results.map((product) => (
            <li key={product.id}>
              <h3>{product.name}</h3>
              <p>{product.description}</p>
              <p><strong>価格：</strong>{product.price.toLocaleString('en-US', { style: 'currency', currency: product.currency })}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

クライアントコンポーネント (`app/components/SearchInputClient.js`)


'use client'; // これはクライアントコンポーネントです

import { useState } from 'react';
import { useRouter } from 'next/navigation'; // Next.js App Routerを想定

export default function SearchInputClient({ initialQuery }) {
  const [searchQuery, setSearchQuery] = useState(initialQuery);
  const router = useRouter();

  const handleInputChange = (e) => {
    setSearchQuery(e.target.value);
  };

  const handleInstantSearch = (e) => {
    // JSが有効な場合はデフォルトのフォーム送信を防止します
    e.preventDefault();
    // クライアントサイドルーティングを使用してURLを更新し、サーバーコンポーネントの再レンダリングをトリガーします（フルページリロードなし）
    router.push(`/search?query=${searchQuery}`);
  };

  return (
    <input
      type="search"
      name="query" // サーバーサイドフォーム送信に重要です
      value={searchQuery}
      onChange={handleInputChange}
      onKeyUp={handleInstantSearch} // リアルタイム候補のためにデバウンスすることもできます
      placeholder="製品を検索..."
      className="border p-2 rounded w-64"
    />
  );
}

説明：

`SearchPage`（RSC）は、URLの`searchParams`に基づいて初期結果をフェッチします。`action="/search"`と`method="GET"`を持つ`form`をレンダリングします。これがフォールバックです。
`SearchInputClient`（クライアントコンポーネント）は、インタラクティブな入力フィールドを提供します。JavaScriptが有効な場合、`handleInstantSearch`（またはデバウンスされたバージョン）は`router.push`を使用してURLを更新します。これはソフトナビゲーションをトリガーし、`SearchPage` RSCをフルページリロードなしで再レンダリングし、インスタント結果を提供します。
JavaScriptが無効になっている場合、`SearchInputClient`コンポーネントはハイドレーションされません。ユーザーは引き続き`<input type="search">`にタイプし、「検索」ボタンをクリックできます。これにより、フルページリフレッシュがトリガーされ、フォームが`/search?query=...`に送信され、`SearchPage` RSCが結果をレンダリングします。エクスペリエンスはそれほどスムーズではありませんが、完全に機能します。

例2：強化されたフィードバックを備えたショッピングカートボタン

グローバルにアクセス可能な「カートに追加」ボタンは常に機能するはずです。

サーバーコンポーネント (`app/components/ProductCard.js`)


// カートへのアイテム追加を処理するサーバーアクション
async function addToCartAction(formData) {
  'use server';
  const productId = formData.get('productId');
  const quantity = parseInt(formData.get('quantity') || '1', 10);
  // データベース操作をシミュレート
  console.log(`サーバー：製品 ${productId} の ${quantity} 個をカートに追加します。`);
  // 実際のアプリでは：データベース、セッションなどを更新します。
  // await db.cart.add({ userId: currentUser.id, productId, quantity });
  // オプションでパスを再検証するか、リダイレクトします
  // revalidatePath('/cart');
  // redirect('/cart');
}

// 製品カードのサーバーコンポーネント
export default function ProductCard({ product }) {
  return (
    <div className="border p-4 rounded shadow">
      <h3>{product.name}</h3>
      <p>{product.description}</p>
      <p><strong>価格：</strong> {product.price.toLocaleString('en-US', { style: 'currency', currency: product.currency })}</p>
      
      {/* Server Actionをフォールバックとして使用したカートに追加ボタン */} 
      <form action={addToCartAction}>
        <input type="hidden" name="productId" value={product.id} />
        <button type="submit" className="bg-green-500 text-white p-2 rounded mt-2">
          カートに追加（サーバーフォールバック）
        </button>
      </form>

      {/* 強化されたカート追加エクスペリエンスのためのクライアントコンポーネント（オプション） */} 
      <AddToCartClientButton productId={product.id} />
    </div>
  );
}

クライアントコンポーネント (`app/components/AddToCartClientButton.js`)


'use client';

import { useState } from 'react';
// サーバーアクションをインポートします。クライアントコンポーネントもそれを呼び出すことができます
import { addToCartAction } from './ProductCard'; 

export default function AddToCartClientButton({ productId }) {
  const [isAdding, setIsAdding] = useState(false);
  const [feedback, setFeedback] = useState('');

  const handleAddToCart = async () => {
    setIsAdding(true);
    setFeedback('追加中...');

    const formData = new FormData();
    formData.append('productId', productId);
    formData.append('quantity', '1'); // 例：数量

    try {
      await addToCartAction(formData); // サーバーアクションを直接呼び出します
      setFeedback('カートに追加されました！');
      // 実際のアプリでは：ローカルカート状態を更新、ミニカートを表示など。
    } catch (error) {
      console.error('カートへの追加に失敗しました:', error);
      setFeedback('追加に失敗しました。もう一度お試しください。');
    } finally {
      setIsAdding(false);
      setTimeout(() => setFeedback(''), 2000); // しばらくしてからフィードバックをクリアします
    }
  };

  return (
    <div>
      <button 
        onClick={handleAddToCart} 
        disabled={isAdding}
        className="bg-blue-500 text-white p-2 rounded mt-2 ml-2"
      >
        {isAdding ? '追加中...' : 'カートに追加（強化版）'}
      </button>
      {feedback && <p className="text-sm mt-1">{feedback}</p>}
    </div>
  );
}

説明：

`ProductCard`（RSC）には、Server Action `addToCartAction` を使用したシンプルな`<form>`が含まれています。このフォームはJavaScriptなしで完璧に機能し、フルページ送信でアイテムがカートに追加されます。
`AddToCartClientButton`（クライアントコンポーネント）は、強化されたエクスペリエンスを追加します。JavaScriptが有効な場合、このボタンをクリックすると`handleAddToCart`がトリガーされ、同じ`addToCartAction`を（フルページリフレッシュなしで）直接呼び出し、即時フィードバック（例：「追加中...」）を表示し、楽観的にUIを更新します。
JavaScriptが無効になっている場合、`AddToCartClientButton`はレンダリングまたはハイドレーションされません。ユーザーは依然としてサーバーコンポーネントからの基本的な`<form>`を使用してアイテムをカートに追加でき、グラフィカルな低下を示しています。

このアプローチのメリット（グローバルな視点）

プログレッシブエンハンスメントとグラフィカルな低下にRSCを採用することは、特にグローバルなオーディエンスにとって、大きな利点をもたらします：

普遍的なアクセシビリティ：堅牢なHTML基盤を提供することで、アプリケーションは古いブラウザ、支援技術、または意図的にJavaScriptを無効にしてブラウジングするユーザーにもアクセス可能になります。これにより、多様な人口統計と地域にわたる潜在的なユーザーベースが大幅に拡大します。
優れたパフォーマンス：クライアントサイドJavaScriptバンドルを削減し、レンダリングをサーバーにオフロードすることで、初期ページロードが速くなり、Core Web Vitals（LCP、FIDなど）が向上し、ユーザーエクスペリエンスが向上します。これは、多くの新興市場で一般的な、低速なネットワークまたは低電力デバイスのユーザーにとって特に重要です。
強化されたレジリエンス：アプリケーションは、断続的なネットワーク接続、JavaScriptエラー、またはクライアントサイドスクリプトブロッカーのような不利な条件下でも利用可能であり続けます。ユーザーは、空白または完全に壊れたページで終わることはなく、信頼とフラストレーションの軽減を促進します。
SEOの向上：検索エンジンは、サーバーレンダリングされたHTMLコンテンツを確実にクロールおよびインデックス化でき、アプリケーションのコンテンツの発見可能性とランキングが向上します。
ユーザーにとってのコスト効率：JavaScriptバンドルが小さいほど、データ転送量が少なくなり、従量制データプランのユーザーやデータが高価な地域のユーザーにとって、具体的なコスト削減につながる可能性があります。
明確な関心の分離：RSCは、サーバーサイドロジック（データフェッチ、ビジネスロジック）がクライアントサイドインタラクティビティ（UIエフェクト、状態管理）から分離された、よりクリーンなアーキテクチャを奨励します。これは、異なるタイムゾーンの分散開発チームにとって有益な、より保守的でスケーラブルなコードベースにつながる可能性があります。
スケーラビリティ：CPU負荷の高いレンダリングタスクをサーバーにオフロードすることで、クライアントデバイスの計算負荷を軽減でき、より幅広いハードウェアでアプリケーションのパフォーマンスが向上します。

課題と考慮事項

メリットは魅力的ですが、RSCとこのプログレッシブエンハンスメントアプローチを採用することには、独自の課題が伴います：

学習曲線：従来のクライアントサイドReact開発に慣れている開発者は、新しいパラダイム、サーバーコンポーネントとクライアントコンポーネントの違い、およびデータフェッチとミューテーションの処理方法を理解する必要があります。
状態管理の複雑さ：状態がサーバー（URLパラメータ、Cookie、またはサーバーアクション経由）またはクライアントに属するかどうかを決定することは、初期の複雑さをもたらす可能性があります。慎重な計画が必要です。
サーバー負荷の増加：RSCはクライアントの作業を削減しますが、レンダリングとデータフェッチのタスクをサーバーにシフトさせます。適切なサーバーインフラストラクチャとスケーリングがさらに重要になります。
開発ワークフローの調整：コンポーネント構築のメンタルモデルを適応させる必要があります。開発者はコンテンツについては「サーバーファースト」、インタラクティビティについては「クライアントラスト」を考える必要があります。
テストシナリオ：JavaScriptの有無、さまざまなネットワーク条件、およびさまざまなブラウザ環境のシナリオを含めるために、テストマトリックスを拡張する必要があります。
バンドルとハイドレーションの境界：`"use client"`境界がどこにあるかを定義することは、クライアントサイドJavaScriptを最小化し、ハイドレーションを最適化するために慎重な検討が必要です。過剰なハイドレーションは、一部のパフォーマンス上の利点を無効にする可能性があります。

プログレッシブRSCエクスペリエンスのためのベストプラクティス

RSCによるプログレッシブエンハンスメントとグラフィカルな低下のメリットを最大化するために、これらのベストプラクティスに従ってください：

「JSなし」でまず設計する：新しい機能を構築する際は、まずHTMLとCSSだけでどのように機能するかを想像してください。サーバーコンポーネントを使用してそのベースラインを実装してください。その後、段階的にJavaScriptを追加して強化してください。
クライアントサイドJavaScriptを最小限に抑える：本当にインタラクティビティ、状態管理、またはブラウザ固有のAPIを必要とするコンポーネントにのみ`"use client"`を使用してください。クライアントコンポーネントツリーを可能な限り小さく、浅く保ってください。
Server Actionsをミューテーションに活用する：すべてのデータミューテーション（フォーム送信、更新、削除）にServer Actionsを採用してください。これらは、バックエンドと対話するための直接的で安全かつパフォーマンスの高い方法を提供し、JSなしのシナリオに対する組み込みフォールバックを備えています。
戦略的なハイドレーション：ハイドレーションがいつ、どこで行われるかに注意してください。インタラクティビティを必要としないUIの大部分の不要なハイドレーションを避けてください。RSC（Next.js App Routerなど）に基づいたツールやフレームワークは、これを自動的に最適化することがよくありますが、根本的なメカニズムを理解することは役立ちます。
Core Web Vitalsを優先する：LighthouseやWebPageTestなどのツールを使用して、アプリケーションのCore Web Vitals（LCP、FID、CLS）を継続的に監視してください。RSCはこれらのメトリクスを改善するように設計されていますが、適切な実装が鍵となります。
明確なユーザーフィードバックを提供する：クライアントサイドの強化がロード中または失敗している場合、ユーザーに明確で邪魔にならないフィードバックを提供してください。これは、ローディングスピナー、メッセージ、または単にサーバーサイドフォールバックがシームレスに引き継がれることを許可することかもしれません。
チームに教育する：チームのすべての開発者が、サーバーコンポーネント/クライアントコンポーネントの違いとプログレッシブエンハンスメントの原則を理解していることを確認してください。これにより、一貫性があり堅牢な開発アプローチが促進されます。

RSCとプログレッシブエンハンスメントによるWeb開発の未来

React Server Componentsは、単なる別の機能以上のものです。それらは、現代のWebアプリケーションがどのように構築できるかの根本的な再評価を表しています。それらは、Reactの愛されている開発者エクスペリエンスとコンポーネントモデルを放棄することなく、サーバーサイドレンダリングの強み（パフォーマンス、SEO、セキュリティ、普遍的なアクセス）への回帰を意味します。

このパラダイムシフトは、開発者が本質的によりレジリエントでユーザー中心のアプリケーションを構築することを奨励します。それは、理想だけでなく、私たちのアプリケーションがアクセスされる多様な条件を考慮するように私たちを駆り立て、JavaScript中心の考え方から、より包括的でレイヤードなアプローチへと移行します。Webが新しいデバイス、多様なネットワークインフラストラクチャ、進化するユーザーの期待とともに世界的に拡大し続けるにつれて、RSCによって推進される原則はますます重要になります。

RSCと、よく考えられたプログレッシブエンハンスメント戦略の組み合わせは、開発者が高度なユーザーにとって非常に高速で機能豊富なアプリケーションだけでなく、すべての人にとって信頼性の高い機能的なアプリケーションを提供することを可能にします。それは、理想のためだけでなく、人間の技術的な条件の全スペクトルに対応するために構築することです。

結論：レジリエントでパフォーマンスの高いWebの構築

真にグローバルでレジリエントなWebを構築する旅には、プログレッシブエンハンスメントやグラフィカルな低下のような基本的な原則へのコミットメントが必要です。React Server Componentsは、Reactエコシステム内でこれらの目標を達成するための強力でモダンなツールキットを提供します。

サーバーコンポーネントからの堅牢なHTMLベースラインを優先し、クライアントコンポーネントでインタラクティビティを責任を持ってレイヤー化し、重要なアクションのための堅牢なサーバーサイドフォールバックを設計することにより、開発者は以下のようなアプリケーションを作成できます：

より高速：クライアントサイドJavaScriptの削減は、初期ロードを迅速化します。
よりアクセス可能：クライアントサイドの機能に関わらず、すべてのユーザーに機能的なエクスペリエンスを提供します。
非常にレジリエント：さまざまなネットワーク条件や潜在的なJavaScript障害にグラフィカルに適応するアプリケーション。
SEOフレンドリー：検索エンジンによる信頼性の高いコンテンツ発見可能性。

このアプローチを採用することは、単にパフォーマンスを最適化するだけではありません。それは、包括性のために構築することであり、世界のどこからでも、どのデバイスからでも、すべてのユーザーが私たちが作成したデジタルエクスペリエンスにアクセスし、意味のある方法で対話できることを保証することです。React Server ComponentsによるWeb開発の未来は、すべての人にとって、より堅牢で、公平で、そして最終的にはより成功したWebへと向かっています。